<script lang="ts" setup>

    // import type { RefSymbol } from '@vue/reactivity'
    import { ref,reactive} from 'vue'
    import MyList from './MyList.vue'
    import {type person} from "@/type"
    //vue的指令（v-bind，v-model，v-on）
    //1.v-if、v-else-if、v-else 条件不满足，该元素和内容不会显示（根本就没有该元素和内容）
    //2.v-show 判断结果为false就隐藏，但是元素还是在的 display:none
    let score=ref(91)
    function updateScore(){
        score.value--
    }
    let visiable=ref(true)//false也存在<p>
    //3.v-for 循环遍历
    let persons:person[]=[{id:"aa",name:"zs",age:18},
                {id:"bb",name:"ls",age:20},
                {id:"cc",name:"ww",age:61}]
     
</script>

<template>
    <h1>分数：{{ score }}</h1>
    <div v-if="score > 90">优秀</div>
    <div v-else-if="score >60">及格</div>
    <div v-else>不及格</div>
    <button v-on:click="updateScore">修改分数</button>

    <p v-show="score < 90">这段文字会根据一个变量来控制显示或隐藏</p>

    <!-- <ul>
        <li v-for="p in persons"> :key="p.id">{{ p.id }}--{{ p.name }}</li>
    </ul> -->
    <MyList :xxx="persons"></MyList>
</template>

<style scoped>


</style>
